"use client";

//Global
import React, { FC, useMemo } from "react";

//Types
import { IPizzaTileItem } from "@/types/types";

//Hooks
import { useTypedSelector } from "@/hooks/useTypedSelector";
import { useCart } from "@/hooks/useCart";
import { useToastMessage } from "@/hooks/useToastMessage";

//Components
import { ToggleButtonComponent } from "@/components/toggleButton/ToggleButton";
import { Button } from "@mui/material";

//Styles
import styles from "../../styles/pizzaSinglePage.module.css";
import "react-toastify/dist/ReactToastify.css";

const PizzaDetails: FC<{ pizza: IPizzaTileItem }> = ({ pizza }) => {
  const { currentUser } = useTypedSelector(state => state.user);

  const { returnChangedPizzaOption, onAddToCart } = useCart();

  const { showToastMessage } = useToastMessage();

  const { pizzaPrice, pizzaDescription, weight } = pizza;

  const handleClick = () => {
    if (currentUser.email) onAddToCart(pizza);
    else showToastMessage("warning", "SignUp or LogIn to add product to cart!");
  };

  const newPizzaPrice = useMemo(
    () => returnChangedPizzaOption(pizzaPrice, 1),
    [pizzaPrice, returnChangedPizzaOption]
  );

  const newPizzaOptions = useMemo(
    () => returnChangedPizzaOption(weight, 50),
    [weight, returnChangedPizzaOption]
  );

  return (
    <section className={styles.singlePagePizzaInformation}>
      <span data-price>{`${newPizzaPrice} $, ${newPizzaOptions}g`}</span>

      <span data-description>{pizzaDescription}</span>

      <ToggleButtonComponent />

      <Button className={styles.buttonOrder} onClick={handleClick}>
        add to cart
      </Button>
    </section>
  );
};

export { PizzaDetails };
